<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/抽符.css">
	</head>
	<body>
		<div id="bg1">
			<img id="text" src="./img/title.png" alt="">
			<img id="box" src="./img/box.png" alt="" onclick="showBg(2)">
		</div>
		<div id="bg2">
			<img id="pumpkin" src="./img/pumpkin.png" alt="">
			<img onclick="showBg(3)" id="startGame" src="./img/startGame.jpg" alt="">
		</div>
		<div id="bg3">
			<img src="img/1.png" onclick="showFu()">
			<img src="img/2.png" onclick="showFu()" >
			<img src="img/3.png" onclick="showFu()" >
			<img src="img/4.png" onclick="showFu()" >
			<img src="img/5.png" onclick="showFu()" >
			<img src="img/6.png" onclick="showFu()" >
			<img src="img/7.png" onclick="showFu()" >
		</div>
		<div id="bg4"></div>
		
		
		<script>
			let oBg1 = document.getElementById('bg1');
			let oBg2 = document.getElementById('bg2');
			let oBg3 = document.getElementById('bg3');
			let oBg4 = document.getElementById('bg4');
			
			function showFu(){
				showBg(4);
				let a = parseInt(Math.random()*7)+1;
				oBg4.style.background = 'url(./img/charm'+a+'.jpg)';
				oBg4.style.backgroundSize = 'cover';
			}
			
			// 根据参数 num ,判断显示那个 div
			function showBg(num){
				oBg1.style.display = 'none';
				oBg2.style.display = 'none';
				oBg3.style.display = 'none';
				oBg4.style.display = 'none';
				if(num == 1){
					oBg1.style.display = 'block';
				}
				if(num == 2){
					oBg2.style.display = 'block';
				}
				if(num == 3){
					oBg3.style.display = 'block';
				}
				if(num == 4){
					oBg4.style.display = 'block';
				}
			}
		</script>
	</body>
</html>
